vue项目如何实现自定义校验规则

您所在的位置：网站首页 › vue rules type › vue项目如何实现自定义校验规则

vue项目如何实现自定义校验规则

#vue项目如何实现自定义校验规则| 来源: 网络整理| 查看: 265

1.data中定义rules校验规则 export defaut { data(){ rules:{ name: [ { required: true, message: '请输入权限名称', trigger: 'blur' } ], code: [ { required: true, message: '请输入权限标识', trigger: 'blur' } ], description: [ { required: true, message: '请输入权限描述', trigger: 'blur' } ] } } } 2.el-form上绑定rules并且把:modle绑定数据项 3.表单每一项添加prop

4.data中自定义校验规则 const validName = (rule, value, callback) => { // 如果是编辑需要排除自己 let{ list } = this const { formData, isEdit } = this list = isEdit ? list.filter(item => item.id !== formData.id) : list list.filter(item => item.pid * 1 === formData.pid).some(it => it.name.trim() === value.trim()) ? callback(new Error(value + '重复了')) : callback() } const validCode = (rule, value, callback) => { let { list } = this const { isEdit, formData } = this list = isEdit ? list.filter(it => it.id !== formData.id) : list list.map(it => it.code).includes(value) ? callback(new Error(value + '重复了')) : callback() } 5.给表单校验规则添加validator属性 rules: { name: [ { required: true, message: '请输入权限名称', trigger: 'blur' }, + { validator: validName, trigger: 'blur' } ], code: [ { required: true, message: '请输入权限标识', trigger: 'blur' }, + { validator: validCode, trigger: 'blur' } ], description: [ { required: true, message: '请输入权限描述', trigger: 'blur' } ] }

6.业务代码讲解

目标

6-1 权限非重验证 const validName = (rule, value, callback) => { // 如果是编辑需要排除自己 let{ list } = this const { formData, isEdit } = this list = isEdit ? list.filter(item => item.id !== formData.id) : list list.filter(item => item.pid == formData.pid).some(it => it.name.trim() === value.trim()) ? callback(new Error(value + '重复了')) : callback() }

首先formdata中存储的信息中有当前的元素的pid

1.如果是编辑我需要排除自己

2.使用filter筛选出数组中pid相同的父级元素这里数组中的每一项的id数字符串而表单里面存储的是数字型所以这里进行==判断

3.使用some判断数组是否有这个元素如果有就抛出错误没有就放行这里数组中的数据传入的是有空格的所以使用trim进行去除两侧的空格

6-2 Code非重验证 const validCode = (rule, value, callback) => { let { list } = this const { isEdit, formData } = this list = isEdit ? list.filter(it => it.id !== formData.id) : list list.map(it => it.code).includes(value) ? callback(new Error(value + '重复了')) : callback() }

代码思路差不多的上面我使用的some 这里使用的是 map拿到数组中每一项会返回一个由code组成的新数组再使用icludes判断数中是否有该元素跟some的效果是一样的

【本文地址】

vue项目如何实现自定义校验规则

vue项目如何实现自定义校验规则

今日新闻

推荐新闻